<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: Wupy
 * @Date: 2023-02-19 19:43:41
 * @LastEditors: Wupy
 * @LastEditTime: 2023-02-21 14:33:51
-->
<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: Wupy
 * @Date: 2022-12-30 19:42:44
 * @LastEditors: Wupy
 * @LastEditTime: 2023-02-19 15:53:10
-->
<template>
    <div class="lessonDetail">
        <!-- 导航栏 -->
        <div class="navTitle">
            <div class="leftIcon"><var-icon name="chevron-left" :size="35" color="#000" @click="backRouter()" /></div>
            <div class="header">课程详情</div>
        </div>
        <!-- 详情介绍 -->
        <div class="detailContent">
            <!-- 详情内容 -->
            <div class="contentLeft">
                <!-- 课程名称 -->
                <div class="LessonName">
                    {{ lessonName.name }}
                </div>
                <!-- 课程简介 -->
                <div class="lessonIntroduc">
                    <!-- 本课程为全校本科生必修课。2学分，66学时，每学期8课时，大一第一学期加2学时 -->
                    {{ lessonName.description }}
                </div>
            </div>
            <!-- 详情图片 -->
            <div class="contentRight">
                <var-image :radius="10" class="detailImg" src="./image/lesson1.jpg" alt="" />
            </div>
        </div>
        <!-- 签到和通知功能 -->
        <div class="funcModule">
            <div class="exam">
                <div class="left">
                    <var-image class="examIcon" src="./image/sign.png" alt="" />
                </div>
                <div class="right">
                    <div class="funcName" @click="sign(userId, createTime)">
                        签到
                    </div>
                    <div class="funcSituation">
                        不要忘记签到奥
                    </div>
                </div>
            </div>
            <div class="task">
                <div class="left">
                    <var-image class="taskIcon" src="./image/notice.png" alt="" />
                </div>
                <div class="right" @click="getNotice(courseId)">
                    <div class="funcName">
                        通知
                    </div>
                    <div class="funcSituation">
                        注意查看通知奥
                    </div>
                </div>
            </div>
        </div>
        <!-- 选项卡功能 -->
        <div class="tab">
            <var-tabs v-model:active="tabActive" @change="changeTab(tabActive)">
                <var-tab name="lessonChapter" class="tabItem">章节</var-tab>
                <var-tab name="lessonDiscuss" class="tabItem">讨论</var-tab>
            </var-tabs>
        </div>

        <!-- 选项卡路由部分 -->
        <router-view></router-view>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute, type RouteLocationRaw } from 'vue-router';
import { useLessonStore } from '@/stores/lesson'
import { useNoticeStore } from '@/stores/notice'
import { storeToRefs } from 'pinia'
import { Dialog } from '@varlet/ui'
import { useUserStore } from '../../stores/user';
import dayjs from 'dayjs'

const userstore = useUserStore();
const { user } = storeToRefs(userstore);
const router = useRouter()
const route = useRoute()

const lessonStore = useLessonStore()
const noticeStore = useNoticeStore()

const { LessonInFo, userSign,getLessonName } = lessonStore
const { lessonInfo,lessonName } = storeToRefs(lessonStore)
const { getLessonNotice } = noticeStore
const { noticeInfo } = storeToRefs(noticeStore)
//点击返回图标的方法
function backRouter() {
    localStorage.removeItem('courseId')
    router.push('/lesson')
}
// 获取当前课程id
const courseId = route.query.courseId || localStorage.getItem('courseId')
localStorage.setItem('courseId', courseId)
// 初始化选项卡选项
const tabActive = ref("lessonChapter")
// 切换选项卡的方法
function changeTab(tabActive: any) {
    router.push({
        path: tabActive,
        query: {
            courseId
        }
    })
}
let createTime = dayjs().format('YYYY-MM-DD HH:mm:ss')


// 获取用户id
const userId = ref<number>()
onMounted(async () => {
    await LessonInFo(courseId)
    await getLessonNotice(courseId)
    await userstore.getuser()
    // console.log(user.value.id)
    userId.value = user.value.id
    localStorage.setItem('userId', JSON.stringify(userId.value))
    await getLessonName(courseId)
})
console.log('lessonName',lessonName);


// 签到方法
function sign(userId, createTime) {
    // console.log(userId);
    userSign(userId, createTime).then(res => {
        console.log(res.data.code);
        if (res.data.code === 20000) {
            Dialog({
                message: "签到成功",
                confirmButton: false,
                cancelButton: false,
            })
        }
    }

    )

}
// 获取通知的方法
const getNotice = (courseId) => {
    getLessonNotice(courseId)
    Dialog({
        message: noticeInfo.value,
        confirmButton: false,
        cancelButton: false,
    })
}


</script>

<style lang="less" scoped>
.lessonDetail {
    background-color: #fff;
    // height: 100vh;
}

.navTitle {
    line-height: 30px;
    display: flex;

    .leftIcon {
        margin-top: 10px;
    }

    .header {
        margin-left: 130px;
        font-size: 16px;
        margin-top: 10px;
        font-weight: 900;
    }
}

.detailContent {
    height: 100px;
    display: flex;
    justify-content: space-between;
    padding-top: 5px;
    padding-left: 18px;
    padding-right: 26px;
    background-color: rgb(236, 238, 239);

    .contentLeft {
        display: flex;
        flex-direction: column;

        .LessonName {
            color: #000;
            font-size: 21px;
            font-weight: 900;
        }

        .lessonIntroduc {
            margin-top: 10px;
            color: #A0A4BF;
            font-size: 14px;
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .contentRight {
        .detailImg {
            width: 85px;
            height: 85px;
            border-radius: 10px;
        }
    }
}

.funcModule {
    height: 85px;
    display: flex;
    padding-top: 20px;
    padding-left: 13px;
    background-color: rgb(236, 238, 239);

    .exam {
        display: flex;
        background-color: #fff;
        width: 175px;
        height: 65px;
        border-radius: 10px;

        .left {
            .examIcon {
                margin: 15px;
                height: 30px;
                width: 30px;
            }
        }

        .right {
            margin-top: 10px;
            margin-left: -5px;

            .funcName {
                margin-top: 5px;
                font-size: 16px;
                font-weight: 900;
            }

            .funcSituation {
                color: #ed8620;
                font-size: 13px;
                font-weight: 500;
            }
        }
    }

    .task {
        display: flex;
        background-color: #fff;
        width: 175px;
        margin-left: 15px;
        height: 65px;
        border-radius: 10px;

        .left {
            .taskIcon {
                margin: 15px;
                height: 28px;
                width: 28px;
            }
        }

        .right {
            margin-top: 10px;
            margin-left: -5px;

            .funcName {
                margin-top: 5px;
                font-size: 16px;
                font-weight: 900;
            }

            .funcSituation {
                color: #465efa;
                font-size: 13px;
                font-weight: 500;
            }
        }
    }
}

.tab {
    .tabItem {
        font-weight: 900;
    }
}
</style>